<template>
  <div class="detail-page">
    <download></download>

    <article class="video-summary">
       <h1 class="audio-title">{{ audio.title }}</h1>

      <section class="content" v-html="audio.contentHtml">
      </section>

      <p class="author">
        音频稿：{{ realName }} <br>
        讲述：{{ realName }}
      </p>
    </article>

    <h3 class="comment-title">用户留言</h3>
    <ul v-infinite-scroll="loadMore"
      :infinite-scroll-disabled="scrollDisabled"
      :infinite-scroll-distance="30">
      <li v-for="comment in list" :key="comment.id">
        <article v-if="comment.headImgUrl" class="comment">
          <div class="avatar">
            <img :src="comment.headImgUrl"/>
          </div>
          <div class="commentcont">
            <div class="commentinfo">
              <p class="name">{{comment.createUserName}}</p>
              <p class="zan"><img src="../../assets/img/zan.png"/>{{comment.praiseCount}}</p>
            </div>
            <p class="commentcontent">
              {{comment.content}}
            </p>
            <p>
              <span class="comment-time">{{getDateDiff(comment.createDate)}}</span>
            </p>
          </div>
        </article>
      </li>
    </ul>

    <div v-show="list.length === 0" class="no-data">
      <img src="../../assets/img/no-data-show.png" />
      <span>暂无评论</span>
    </div>

  </div>
</template>

<script>
import FocusApi from "../../api/focus.js";
import download from '../../components/download.vue';

export default {
  components: {
    download
  },

  data () {
    return {
      audio: {},
      realName: '',

      list: [
        // {
        //   arguedId: 219040,
        //   arguedUserName: "周千城",
        //   commentsCount: 0,
        //   content: "加油",
        //   createDate: 1540370487000,
        //   createUser: 222383,
        //   createUserName: "PINK",
        //   headImgUrl: "http://dhimg.rz158.com/201810/24/16/2018102416c1382adc51ef44328b5184002a2593a9.jpg",
        //   id: 193,
        //   idDelete: 0,
        //   infoCommentsVoList: null,
        //   informationId: 13,
        //   isPraise: 0,
        //   pid: 132,
        //   praiseCount: 0,
        //   reviewersId: 222383,
        //   userType: null,
        // }
      ],
      loading: false,
      page: 1,
      finished: false
    }
  },

  methods: {
    getDateDiff(dateTimeStamp) {
      var result;
      var minute = 1000 * 60;
      var hour = minute * 60;
      var day = hour * 24;
      var halfamonth = day * 15;
      var month = day * 30;
      var now = new Date().getTime();
      var diffValue = now - dateTimeStamp;
      if (diffValue < 0) {
        return;
      }
      var monthC = diffValue / month;
      var weekC = diffValue / (7 * day);
      var dayC = diffValue / day;
      var hourC = diffValue / hour;
      var minC = diffValue / minute;
      if (monthC >= 1) {
        if (monthC <= 12) result = "" + parseInt(monthC) + "月前";
        else {
          result = "" + parseInt(monthC / 12) + "年前";
        }
      } else if (weekC >= 1) {
        result = "" + parseInt(weekC) + "周前";
      } else if (dayC >= 1) {
        result = "" + parseInt(dayC) + "天前";
      } else if (hourC >= 1) {
        result = "" + parseInt(hourC) + "小时前";
      } else if (minC >= 1) {
        result = "" + parseInt(minC) + "分钟前";
      } else {
        result = "刚刚";
      }
      return result;
    },
    loadMore () {
      const _this = this

      if (this.loading || this.finished) {
        return
      }

      this.loading = true

      FocusApi.getMicroSpeakingComments(this.$route.query.detailId, this.page).then(res => {
        let data = res.result || []
        // infoCommentsVos
        _this.loading = false

        if (data.length < 20) {
          _this.finished = true
        }

        data.forEach(item => {
          _this.list.push(item);
        })
      });
    }
  },

  computed: {
    scrollDisabled () {
      return this.finished || this.loading
    }
  },

  mounted () {
    const that = this;

    FocusApi.getMindMainDetail(this.$route.query.detailId).then(res => {
      let data = res.result || {};
      if (data.tMicroSpeakingDetailVos) {
        var index = data.tMicroSpeakingDetailVos.findIndex(item => {
          return item.id == that.$route.query.videoId
        })

        that.audio = data.tMicroSpeakingDetailVos[index]
        that.realName = data.realName
      }
    })
  }
}
</script>

<style  lang="less" scoped>
.detail-page {
  padding-top: 1.04rem;
  font-size: 16px;
  box-sizing: border-box;
  min-height: 100%;
  background-color: #efefef;
}

.no-data {
  width: 160px;
  text-align: center;
  margin: 40px auto;
  font-size: 14px;
  color: #707070;

  img {
    display: block;
    width: 100%;
    margin-bottom: 15px;
  }
}

.video-summary {
  padding: 0.3rem;
  background-color: #fff;

  .audio-title {
    font-size: 0.36rem;
    text-align: center;
    padding-bottom: 0.3rem;
  }

  .author {
    margin-top: 0.3rem;
    font-size: 0.24rem;
    line-height: 1.5;
    color: #8d8d8d;
  }
}

.comment-title {
  background-color: #fff;
  font-size: 0.3rem;
  font-weight: normal;
  padding: 0.2rem 0.3rem 0 0.3rem;
  border-top: 1px solid #ccc;
  color: #202020;
  line-height: 1;

  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #ccc;
    margin-top: 0.2rem;
  }
}

.content {
  font-size: 0.28rem;
  line-height: 1.5;
  color: #282828;
}

.comment {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 0.25rem 0 0 0.3rem;
}

.avatar {
	width: 0.6rem;
  height: 0.6rem;
	border: 0px solid red;
	overflow: hidden;
	margin-right: 10px;
}

@media all and (max-width: 370px) {
  .avatar {
    width: 30px;
    height: 30px;
  }
}

.avatar img {
	margin:0;
	padding:0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.commentcont {
  /* width: 86%; */
  font-family: "微软雅黑";
  flex: 1;
  padding-right: 0.3rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #ccc;
}

.reply {
  float: right;
  clear: right;
  color: #707070;
  font-size: 0.26rem;
}

.name {
  font-size: 0.28rem;
  color: #5b6a92;
  font-family: "微软雅黑";
}
.huifu {
  font-size: 0.28rem;
  color: #29abae;
  padding-left: 0.20rem;
  font-family: "微软雅黑";
}
.commentinfo {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.1rem;
  font-family: "微软雅黑";
}
.comment-time {
  font-size: 0.28rem;
  color: #8d8d8d;
  font-family: "微软雅黑";
  float: left;
}
.commentcontent {
  font-size: 0.28rem;
  color: #282828;
  line-height: 1.5;
  text-align: justify;
  /* margin-bottom: 0.1rem; */
}

.zan {
  color: #909090;
  font-size: 0.24rem;
}

.zan img {
  width: 0.4rem;
  vertical-align: text-bottom;
}
</style>
